<template>
	<div class="comment-container c-txt">
		<div v-if="type=='complete'" class="clear comment-header">
			<span class="fl">
				<img :src="comment.comment_user_head">
				<span class="vertical">{{comment.comment_user_nickname}}</span>
			</span>
			<span class="fr">
				{{utcToDate(comment.time)}}
			</span>
		</div>	
		<div style="padding:.2rem 0">
			<div class="clear">
				<Stars class="fl" v-model="comment.star_num" :clickable="false"></Stars>
				<div class="fr" v-if="type=='brief'">{{comment.comment_user_nickname}}</div>
			</div>
			<p class="c-txt" style="marginTop: .1rem">{{comment.content}}</p>
			<div>
				<div v-for="img in comment.comment_pic" class="img-wrapper">
					<ImgHolder :src="img"></ImgHolder>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
import { utcToDate } from '@/assets/js/utils.js'
import ImgHolder from '@/components/ImgHolder'
import Stars from '@/components/Stars'
export default{
	name:'Comment',
	methods: {
		utcToDate(timestamp) {
			return utcToDate(timestamp)
		}
	},
	/**
	 * type: 'complete' 完整版 评论详情里用;
		type: 'brief' 阉割版 商品详情里用
	 */
	props: ['comment','type'],
	components: {ImgHolder, Stars}
}
</script>
<style lang='less' scoped>
.comment-container{
	width: 100%;
	background: #fff;
	.comment-header{
		height: 1.2rem;
		line-height: 1.2rem;
		border-bottom: 1px solid #ddd;
		padding-right: .4rem;
		img{
			vertical-align: middle;
			width: .66rem;
			height: .66rem;
			border-radius: 100%;
			margin-right: .2rem;
		}
	}
	.img-wrapper{
		margin-top: .15rem;
		margin-right: .15rem;
		display: inline-block;
	}
}
</style>